<template>
  <div>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>数据中心</el-breadcrumb-item>
    <el-breadcrumb-item>工序管理</el-breadcrumb-item>
  </el-breadcrumb>
</div>
    <el-card class="box-card">
<div>
  <el-form :inline="true" :model="searchForm" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="searchProcess">查询</el-button>
      <el-button type="primary" @click="addProcess">添加</el-button>
      <el-button @click="exportExcel()" type="primary">导出</el-button>
      <el-button @click="importExcelVisible=true" type="primary">导入</el-button>
    </el-form-item>
  </el-form>
</div>
    <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed prop="code" label="编号" width="180"></el-table-column>
          <el-table-column fixed prop="name" label="名称" width="180"></el-table-column>
          <el-table-column fixed prop="cType" label="收费方式" width="180">
            <template slot-scope="scope">
              {{scope.row.ctype | cTypeFit}}
            </template>
          </el-table-column>
          <el-table-column fixed prop="price" label="单价" width="180"></el-table-column>
          <el-table-column fixed prop="prePrice" label="准备工时单价" width="180"></el-table-column>
          <el-table-column fixed prop="remarks" label="描述" width="180"></el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-dropdown>
                <el-button type="mini" trigger="click">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button>
                  <el-button @click="UpdateById(scope.row.id)" type="text" size="small">编辑</el-button>
                  <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

    </div>


        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[1,3,5,10]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>


    </el-card>
<div>
  <el-dialog :close-on-click-modal="false" title="导入工序信息" :visible.sync="importExcelVisible" width="25%">
    <el-upload
      class="upload-demo"
      drag
      action="/api/process/importExcel"
      :headers="auth"
      :on-success="upLoadExcelSuccess"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </el-dialog>
</div>


  </div>

</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        page: {
          currentPage:0,
          pageSize:5,
        },
        total: 0,
        searchForm:{
          name:''
        },
        importExcelVisible:false,
        auth:{token:null}
      }
    },
    created() {
      this.auth.token = sessionStorage.getItem("token");
      this.searchProcess()
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      searchProcess: function () {//用户列表
        this.$http.post("/process/list/" + this.page.currentPage + "/" + this.page.pageSize, this.searchForm).then((res) => {
          this.tableData = res.data.result.list;
          this.total = res.data.result.total;
        });
      },
      addProcess: function() {
        this.$router.push({ path: "/AddProcess" })
      },
      UpdateById: function(id) {
        this.$router.push({path: "/UpdateProcess?id="+id})
      },
      //删除
      deleteById: function(id) {
          this.$http.get("/process/deleteById/"+id).then((req)=>{
            if(req.data.success){
              this.searchProcess();
              alert(req.data.message);
            }else {
              alert(req.data.message);
            }
          })
      },
      handleSizeChange: function (val) {
        this.page.pageSize = val;
        this.searchProcess();
      },
      handleCurrentChange: function (val) {
        this.page.currentPage = val;
        this.searchProcess();
      },
      exportExcel:function () {
        location.href="http://localhost:8080/process/exportExcel";
      },
      upLoadExcelSuccess:function (res,file) {
        if(res){
          this.importExcelVisible=false
          this.searchProcess()
        }
      }
    },
    filters:{
      cTypeFit:function (val) {
        if(val=='0'){
          return '按时间';
        }
        if(val=='1'){
          return '按重量';
        }
        if(val=='2'){
          return '按面积';
        }
      }
    }
  }
</script>
